<template>
    <div class="edit-page">
        <back title="个人认证"></back>
        <div class="edit-conent">
            <div class="edit-avatar"><span class="avatar"><i class="iconfont icon-morentouxiang"></i></span></div>
            <div class="edit-item nickname">
                <span class="label">昵称:</span>
                <input type="text" class="control-input" v-model.trim="nicknmae" placeholder="请输入昵称">
            </div>
            <div class="edit-item codetype">
                <span class="label">证件类型:</span>
                <p @click="showActive" class="control-input">{{codetype}}</p>
            </div>
            <div class="edit-item codenum">
                <span class="label">证件号码:</span>
                <input type="text" class="control-input" v-model.trim="codeNum" placeholder="请输入证件号码">
            </div>
            <div class="edit-item codeimg">
                <span class="label">证件照片:</span>
                <div class="edit-imglist">
                    <div class="edit-add">
                        <input type="file" name="file" class="file" @change="addImg(1)" ref="inputer_a"  accept="image/*">
                        <span class="imgbg">
                            <img  :src="imga" alt="">
                        </span>
                    </div>
                    <div class="edit-add">
                        <input type="file" name="file" class="file" @change="addImg(2)" ref="inputer_b"  accept="image/*">
                        <span class="imgbg">
                            <img  :src="imgb" alt="">
                        </span>
                    </div>
                </div>
            </div>
            <div class="edit-item submit">
                <button type="button" @click="update"><cube-loading v-show="loading"></cube-loading>保存</button>
            </div>
        </div>
    </div>
</template>

<style lang="stylus">
    .edit-page{
        padding-top:50px;
        background #f4f4f4
        .edit-conent{
            width:100%;
            height 100%
            .edit-avatar{
                width 100%
                padding 20px 0
                .avatar{
                    width 80px
                    height 80px
                    display block
                    margin 0 auto
                    background #ccc
                    border-radius 50%
                    i{
                        font-size 80px
                        color #fff
                    }
                }
            }
            .edit-item{
                font-size 14px
                min-height 50px
                display flex
                .label{
                    font-size 14px
                    min-width 80px
                    text-align right
                    height 35px
                    line-height 35px
                    margin-right 10px
                }
                .control-input{
                    width calc(100% - 150px)
                    height 35px
                    line-height 35px
                    padding 0 10px
                    background #ffffff
                    border-radius 5px
                    outline none
                    position relative
                    border 1px solid #eee
                    color #333
                }
                .edit-imglist{
                    width calc(100% - 100px)
                    display flex
                    .edit-add{
                        width 40%
                        height 80px
                        background #fff
                        display flex
                        align-items center
                        justify-content center
                        font-size 20px
                        color #999
                        margin-right 10px
                        position relative
                        .file{
                            width 100%
                            height 100%
                            display block
                            opacity 0
                            position relative
                            z-index 1
                        }
                        .imgbg{
                            display block
                            width 100%
                            height 100%
                            position absolute
                            top 0
                            left 0
                            display flex
                            align-items center
                            justify-content center
                            background url(../../assets/image/addimg.png) no-repeat center
                            background-size 30px
                            overflow hidden
                            img{
                                width 100%
                                height 100%
                                display block
                            }
                        }
                    }
                }
                &.submit{
                    text-align center
                    margin-top 50px
                    button{
                        width 80%
                        height  40px
                        color #fff
                        background-image: linear-gradient(to right, #782be9, #6456fd)
                        border 0
                        border-radius 50px
                        margin 0 auto
                        font-size 18px
                        outline none
                        display flex
                        align-items center
                        justify-content center
                        &.disabled{
                            background #ddd
                        }
                    }
                }
                &.codetype{
                    .control-input:after{
                        display block
                        content ""
                        width 0
                        height 0
                        border-width 6px
                        border-style solid 
                        border-color #ccc transparent transparent transparent
                        position absolute
                        top 15px
                        right 10px
                    }
                }
            }
        }
    }
</style>

<script>
export default {
    data(){
        return{
            nicknmae:'',
            codetype:'身份证',
            codeNum:'',
            userinfo:'',
            image_a:'',
            image_b:'',
            imga:'',
            imgb:'',
            loading:false,
            disabled:true
        }
    },
    created(){
        this.getIdentify();
    },
    methods:{
        showActive() {
            this.$createActionSheet({
                data: [
                {
                    content: this.userinfo.typeMap.id_card
                }
                ],
                onSelect: (item, index) => {
                    this.codetype = item.content
                },
                onCancel: () => {

                }
            }).show()
        },
        getIdentify(){
            this.$http.get(`/MyInfo/getIdentify`).then( res => {
                console.log(res)
                if(res.code == 200){
                    this.userinfo = res.data
                    this.nicknmae = this.userinfo.info.name
                    this.codeNum = this.userinfo.info.cardNum
                    this.imga = this.image_a = this.userinfo.info.image_a
                    this.imgb = this.image_b = this.userinfo.info.image_b
                }
            })
        },
        addImg(type) {
            //这边写图片的上传
            if(type == 1){
                let img_a = this.$refs.inputer_a.files[0];
                if(img_a){
                    if(img_a.size >1024*1024*5){
                        this.createToast('上传图片不能超过5M','warn')
                        return;
                    }
                    this.image_a = img_a;
                    this.imga = this.getObjectURL(this.image_a)
                }
            }else{
                let img_b = this.$refs.inputer_b.files[0];
                if(img_b){
                    if(img_b.size >1024*1024*5){
                        this.createToast('上传图片不能超过5M','warn')
                        return;
                    }
                    this.image_b = img_b;
                    this.imgb = this.getObjectURL(this.image_b)
                }
            }
        },
        update(){
            let config = {
                headers: {'Content-Type': 'multipart/form-data'}
            };
            let formdata = new FormData(); //创建form对象
            formdata.append('type','id_card');
            formdata.append('cardNum',this.codeNum);
            formdata.append('name',this.nicknmae);
            formdata.append('image_a',this.image_a);
            formdata.append('image_b',this.image_b);
            if(!this.codeNum || !this.nicknmae || !this.image_a || !this.image_b){
                this.createToast('信息不能有空','warn')
                return;
            }
            this.loading = true;
            this.$http.postup('/MyInfo/updateUserIdentify',formdata, config).then(res => {
                console.log(res);
                this.loading = false;
                if(res.code == 200){
                    this.createToast(res.msg,'correct')
                }else{
                    
                }
            })
        },
        getObjectURL(file) {
            var url = null ;
            if (window.createObjectURL!=undefined) { // basic
                url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        },
        createToast(txt,type){
            this.$createToast({
                txt: txt,
                time: 1500,
                type:type
            }).show()
        }
    }
}
</script>
